
import React,{useState} from 'react'

export default function Index() {

    console.log("函数式组件被调用了");

    // 1、定义一个状态：
    // 1)、基本类型
    // const [状态变量名,修改状态的函数] = useState(状态的初始值);
    const [count,setCount] = useState(0);
    //2）、引用类型：
    const [person,setPerson] = useState({name:"张三",age:18}); 

    function changeCount(){
        // 2、修改状态：
        setCount(count+1);
        console.log("count",count);
    }

    function changeAge(){
        setPerson({
            ...person,
            age:person.age+1
        })
    }
    
  return (
    <div>
        <h1>函数式组件里使用状态：useState</h1>
        <p>count:{count}</p>
        <input type="button" value="修改count" onClick={changeCount} />
        <hr/>
        <p>姓名：{person.name}</p>
        <p>年龄：{person.age}</p>
        <p>
            <input type="button" value="长大" onClick={changeAge} />
        </p>
    </div>
  )
}
